<template>
  <div class="">
    <mu-container>
      <mu-bottom-sheet :open.sync="isOpen" style="border-radius: 10px 10px 0 0">
        <div class="goodsDialog">
          <span class="closedIcon" @click="closeDialog()"><svg-icon icon-class="icon_close2" /></span>
          <div class="headerInfo">
            <img v-if="goodsItem.image_url" :src="goodsItem.image_url" class="leftImg" alt="">
            <img v-else src="../../../../assets/item-default.png" class="leftImg" alt="">
            <span class="rightWord">
              <span class="title">{{ goodsItem.title }}</span>
              <span class="price"><span class="unit">&yen; </span>{{ Number(goodsItem.price).toFixed(getitem.item_price_p) }}</span>
              <span class="tip"/>
            </span>
          </div>
          <div class="formData">
            <div class="chooseBox">
              <!--多规格没有 store_num-->
              <div v-if="goodsItem.sku_lists.length !== 0">
                <!--遍历规格生成-->
                <div v-for="sku in goodsItem.sku_lists" :key="sku.sku_id" class="itemBox">
                  <span class="leftItem">
                    <div class="title">{{ sku.sku_name }}</div>
                    <div class="price">&yen; {{ Number(sku.price).toFixed(getitem.item_price_p) }}</div>
                  </span>
                  <span class="rightItem">
                    <span class="numInput">
                      <span v-if="getstock.show_stock_type === 0" />
                      <span v-if="getstock.show_stock_type === 1">
                        <span class="storeNum">{{ Number(sku.store_num) > 0 ? '有货' : '库存不足' }}</span>
                      </span>
                      <span v-if="getstock.show_stock_type === 2">
                        <span v-if="sku.store_num" class="storeNum">库存:{{ Number(sku.store_num) > 99999 ? '>99999' : sku.store_num }}</span>
                        <span v-else class="storeNum">库存:0</span>
                      </span>
                      &nbsp;&nbsp;
                      <!--:max="sku.store_num"-->
                      <van-stepper :min="0" :step="1" v-model="sku.buyNum" />
                    </span>
                  </span>
                </div>
              </div>
              <div v-else class="itemBox">
                <span class="leftItem">
                  <span class="noSpec">无规格</span>
                  <span class="noSpec">&yen; {{ goodsItem.price }}</span>
                </span>
                <span class="rightItem">
                  <span class="numInput">
                    <span v-if="getstock.show_stock_type === 0" />
                    <span v-if="getstock.show_stock_type === 1">
                      <span class="storeNum">库存:{{ Number(goodsItem.store_num) > 0 ? '有货' : '库存不足' }}</span>
                    </span>
                    <span v-if="getstock.show_stock_type === 2">
                      <span v-if="goodsItem.store_num" class="storeNum">库存:{{ Number(goodsItem.store_num) > 99999 ? '>99999' : goodsItem.store_num }}</span>
                      <span v-else class="storeNum">库存:0</span>
                    </span>&nbsp;&nbsp;
                    <!--:max="sku.store_num"-->
                    <van-stepper :min="0" :step="1" v-model="singleNum"/>
                  </span>
                </span>
              </div>
            </div>
            <!--总计-->
            <div class="totalData">
              <span class="totalNum" >共 <span class="red">{{ totalNum }}</span> 件</span>
              <span class="totalPrice red"><span class="unit">&yen;</span><span class="">{{ Number(totalPrice).toFixed(getitem.item_price_p) }}</span></span>
            </div>
            <div v-if="type=== 1" class="addShopCar org-bg" @click="addShopCar">加入购物车</div>
            <div v-if="type=== 2" class="addShopCar org-bg" @click="buNow">立即下单</div>
          </div>
        </div>
      </mu-bottom-sheet>
    </mu-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PostAddCart } from '@/api/cart'
export default {
  name: 'Index',
  data() {
    return {
      isOpen: false,
      goodsItem: {
        sku_lists: []
      },
      singleNum: 0,
      type: 1
    }
  },
  computed: {
    // 计算总数量
    totalNum() {
      let totalNum = 0
      const goodsItem = this.goodsItem
      if (goodsItem.sku_lists && goodsItem.sku_lists.length > 0) {
        goodsItem.sku_lists.forEach(sku => {
          totalNum += sku.buyNum
        })
      } else {
        totalNum = this.singleNum
      }
      return totalNum
    },
    // 计算总价格d
    totalPrice() {
      let totalPrice = 0
      const goodsItem = this.goodsItem
      if (goodsItem.sku_lists && goodsItem.sku_lists.length > 0) {
        goodsItem.sku_lists.forEach(sku => {
          totalPrice += sku.buyNum * parseFloat(sku.price)
        })
      } else {
        totalPrice = this.singleNum * parseFloat(goodsItem.price)
      }
      return totalPrice
    },
    ...mapGetters([
      'getitem',
      'getstock'
    ])
  },
  methods: {
    // 点击关闭
    closeDialog() {
      this.isOpen = false
    },
    // 点击加入购物车
    addShopCar() {
      if (this.totalNum === 0) {
        `this.$toast({
          duration: 1500,
          message: '您还没有选择商品'
        })`
      } else {
        this.$toast.loading({
          mask: false,
          message: '请稍后...'
        })
        const data = {
          item_ids: [],
          sku_ids: [],
          nums: []
        }
        if (this.goodsItem.sku_lists.length !== 0) {
          this.goodsItem.sku_lists.forEach(sku => {
            if (sku.buyNum > 0) {
              data.item_ids.push(sku.item_id)
              if (sku.sku_id) {
                data.sku_ids.push(sku.sku_id)
              }
              data.nums.push(sku.buyNum)
            }
          })
        } else {
          data.item_ids.push(this.goodsItem.item_id)
          data.nums.push(this.totalNum)
          data.sku_ids = ['']
        }
        console.log('点击加入购物车=', data)

        // 请求接口
        PostAddCart(data).then(res => {
          const data = res.data
          if (data.status_code === 200) {
            this.$toast.success({
              duration: 1500,
              message: '已加入购物车'
            })
            this.isOpen = false
            this.singleNum = 0
            this.$store.dispatch('setCartItemNumFn')
          } else {
            this.$toast.fail(data.message)
          }
        })
      }
    },
    // 立即下单
    buNow() {
      if (this.totalNum === 0) {
        this.$toast({
          duration: 1500,
          message: '您还没有选择商品'
        })
      } else {
        const data = {
          item_ids: [],
          sku_ids: [],
          nums: [],
          is_cart: 0
        }
        if (this.goodsItem.sku_lists.length !== 0) {
          this.goodsItem.sku_lists.forEach(sku => {
            if (sku.buyNum > 0) {
              data.item_ids.push(sku.item_id)
              if (sku.sku_id) {
                data.sku_ids.push(sku.sku_id)
              } else {
                data.sku_ids.push('')
              }
              data.nums.push(sku.buyNum)
            }
          })
        } else {
          data.item_ids.push(this.goodsItem.item_id)
          data.nums.push(this.totalNum)
          data.sku_ids = ['']
        }
        this.$router.push({ name: 'shop-settlement', query: {
          itemData: JSON.stringify(data)
        }})
      }
    }
  }
}
</script>

<style lang="scss">
  @import "src/styles/mixin.scss";
  .mu-bottom-sheet{
    background-color:rgba(0,0,0,0);
    padding-top: pxCalc(20px);
    background-clip: content-box;
  }
  .goodsDialog{
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .closedIcon{
      position: absolute;
      right: pxCalc(10px);
      top: pxCalc(25px);
      z-index: 999;
    }
    .headerInfo{
      height: pxCalc(124px);
      width: 100%;
      .leftImg{
        background-color: #fff;
        position: absolute;
        left: pxCalc(20px);
        height: pxCalc(120px);
        width: pxCalc(120px);
        border-radius: pxCalc(5px);
        top:0;
        box-shadow: 0 pxCalc(5px) pxCalc(10px) rgba(0, 0, 0, 0.2);
      }
      .rightWord{
        height: 100%;
        padding-left: pxCalc(155px);
        padding-top: pxCalc(15px);
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .title{
          font-size: pxCalc(14px);
          color: #363b43;
          display: inline-block;
          width: pxCalc(170px);
          word-break: break-all;
          @include lineClamp($font-size:pxCalc(14px),$line-height:2,$lines-to-show:2)
        }
        .price{
          display: inline-block;
          width: 100%;
          font-weight: bold;
          font-size: pxCalc(15px);
          color: #ff0000;
          .unit{
            font-size: pxCalc(13px);
            font-weight: normal;
          }
        }
      }
    }
    .formData{
      width: 100%;
      padding: 0 pxCalc(20px);
      .chooseBox{
        max-height: pxCalc(245px);
        overflow-x: scroll;
        border-bottom: 1px solid #eee;
        &::-webkit-scrollbar{
          /*display: none;*/
        }
        .itemBox{
          border-top: 1px solid #eee;
          display: flex;
          /*line-height:pxCalc(60px);*/
          justify-content: space-between;
          .leftItem{
            padding: pxCalc(5px) 0;
            color: #353535;
            .noSpec{
              font-size: pxCalc(13px);
              line-height: pxCalc(50px);
              margin-right: pxCalc(10px);
              &:last-child{
                margin-right: 0;
              }
            }
            .title{
              font-size: pxCalc(13px);
              margin-top: pxCalc(5px);
              width: pxCalc(165px);
              display: inline-block;
              @include showEllipsis;
            }
          }
          .rightItem{
            .storeNum{
              display: inline-block;
              color: #aaa;
            }
            .numInput{
              height: 100%;
              padding: pxCalc(15px) 0;
              display: flex;
              line-height: pxCalc(30px);
              flex-direction: row;
              justify-content: center;
            }
          }
        }
      }
      .totalData{
        width: 100%;
        height: pxCalc(50px);
        display: flex;
        padding-top: pxCalc(8px);
        justify-content: space-between;
        font-size: pxCalc(14px);
        .red{
          color: #ff0000;
        }
        .totalNum{
          line-height: 35px;
        }
        .totalPrice{
          font-size: pxCalc(20px);
          .unit{
            font-size: pxCalc(12px);
            margin-right: pxCalc(2px);
          }
        }
      }
      .addShopCar{
        width: 100%;
        height: pxCalc(44px);
        line-height: pxCalc(44px);
        text-align: center;
        border-radius: pxCalc(50px);
        color: #fff;
        margin-bottom: pxCalc(10px);
        margin-left: 0;
        margin-top: 0;
        font-size: pxCalc(15px);
      }
    }
  }
</style>
